<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <title>-</title>
  <link rel="icon" href="images/favicon.png" type="image/x-icon" />
  <style type="text/css">
    body {
      margin: 0 8px;
      text-align: center;
      font-family: cursive;
      font-size: 14px;
    }
    .main {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid black;
    }
    .main td, th {
      border: 1px solid black;
      padding: 0 8px;
    }
    .main caption {
      margin-top: 60px;
      margin-bottom: 60px;
    }
    .pageNum {
      text-align: right;
    }
    .row {
      height: 20px;
    }
    font {
      font-family: cursive;
    }
  </style>
  <script charset="utf-8" language="JavaScript" type="text/javascript">
    window.onload = function () {
      var title = '员工信息';
      var pageSize = 35; // A4纸横向打印多少行记录
      var rowHeight = 33; // 表格行高

      var data = localStorage.getItem('staffData');
      if (!data) {
        console.log('数据不能为空');
        return;
      }

      var err = '';
      try {
        data = JSON.parse(data);
        console.log(data);
      } catch (e) {
        console.log('数据格式不正确', e);
        err = e;
      }
      if (err) return;

      var act = localStorage.getItem('action');
      if (!act) {
        console.log('动作不能为空');
        return;
      }
      console.log('action:', act);

      var dom = document.getElementById('pages');
      var pageHtml = dom.innerHTML;
      var html = '';
      var newData = funcRender(data);

      for (var i = 0, page = 0, count = 0; i < newData.length; i += 1, count += 1) {
        var row = newData[i];
        html += '<tr>';
        var values = [
          i + 1, row.num, row.name, row.jobName, row.pay1, row.pay0, row.sex, row.birthday,
          row.age, row.idCardNum, row.addTime, row.address, row.regType, row.phone,
          row.politicsName, row.cultureName, row.marriageName, row.physicalDate,
          row.edu, row.promise, row.cashPledgeNum, row.remark,
        ];
        for (var j = 0; j < values.length; j += 1) {
          var value = values[j];
          var addClass = j ? '' : ' class="row"';
          html += '<td align="center"' + addClass + '>' + wrapText(value) + '</td>';
        }
        html += '</tr>';

        if (count && (count + 1) % pageSize === 0) {
          dom = document.getElementsByClassName('main');
          dom[page].getElementsByTagName('tbody')[0].innerHTML += html;
          page += 1;
          html = '';
          dom = document.getElementById('pages');
          dom.innerHTML += pageHtml;
        }
      }

      if (html !== '') {
        dom = document.getElementsByClassName('main');
        dom[page].getElementsByTagName('tbody')[0].innerHTML += html;
        var n0 = dom[0].getElementsByTagName('tr').length;
        var n1 = dom[dom.length - 1].getElementsByTagName('tr').length;
        dom = document.getElementsByClassName('pageNum');
        dom[page].style.marginTop = (n0 - n1) * rowHeight + 'px';
      }

      dom = document.getElementsByClassName('pageNum');
      for (var i = 0; i < dom.length; i += 1) {
        dom[i].children[0].textContent = '第' + (i + 1) + '页，共' + dom.length + '页';
      }

      if (act === 'print') window.print();
      else if (act === 'export') {
        // 参考自：HTML中的table导出为Excel文件
        // https://www.cnblogs.com/hill-foryou/p/9224778.html
        var uri = 'data:application/vnd.ms-excel;base64,';
        var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
        var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) };
        var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };

        dom = document.getElementById('pages');
        var content = { worksheet: title, table: dom.innerHTML };

        var a = document.createElement('a');
        a.href = uri + base64(format(template, content));
        var now = new Date();
        a.download = title + new Date().toISOString().split('T')[0] + '.xls';
        a.click();
      }
    }

    // 渲染数据, 使之显示更加合理
    function funcRender(data) {
      return data.map(function(item) {
        var newItem = item;
        if (item.pay1 === 0) newItem.pay1 = '';
        if (item.pay0 === 0) newItem.pay0 = '';
        newItem.sex = newItem.sex === '1' ? '男' : '女';
        if (!isNaN(newItem.idCardNum)) newItem.idCardNum = "'" + newItem.idCardNum; // 防止显示为科学计数格式
        newItem.birthday = newItem.birthday === '1900-01-01 00:00:00' ? '' : newItem.birthday.substr(0, 10);
        newItem.addTime = newItem.addTime === '1900-01-01 00:00:00' ? '' : newItem.addTime.substr(0, 10);
        newItem.physicalDate = newItem.physicalDate === '1900-01-01 00:00:00' ? '' : newItem.physicalDate.substr(0, 10);
        newItem.regType = newItem.regType === '1' ? '农业户口' : '非农户口';
        newItem.edu = newItem.edu === '1' ? '有' : '';
        newItem.promise = newItem.promise === '1' ? '有' : '';
        newItem.cashPledgeNum = newItem.cashPledgeNum > 0 ? newItem.cashPledgeNum : '';
        return newItem;
      });
    }

    // 包裹文字
    function wrapText(text) {
      return '<font face="楷体">' + text + '</font>';
    }
  </script>
</head>
<body>
<div id="pages">
  <table class="main">
    <caption>
      <font face="楷体" size="6" style="font-weight:bold;">
        员工信息
      </font>
    </caption>
    <thead>
      <tr>
        <th style="min-width:30px;" class="row"><font face="楷体">序号</font></th>
        <th style="min-width:60px;"><font face="楷体">档案号</font></th>
        <th style="min-width:50px;"><font face="楷体">姓名</font></th>
        <th style="min-width:140px;"><font face="楷体">岗位名称</font></th>
        <th style="min-width:60px;"><font face="楷体">正式工资</font></th>
        <th style="min-width:60px;"><font face="楷体">试用工资</font></th>
        <th style="min-width:30px;"><font face="楷体">性别</font></th>
        <th style="min-width:70px;"><font face="楷体">出生年月</font></th>
        <th style="min-width:30px;"><font face="楷体">年龄</font></th>
        <th style="min-width:130px;"><font face="楷体">身份证号</font></th>
        <th style="min-width:70px;"><font face="楷体">入职日期</font></th>
        <th style="min-width:160px;"><font face="楷体">家庭住址</font></th>
        <th style="min-width:60px;"><font face="楷体">户口性质</font></th>
        <th style="min-width:70px;"><font face="楷体">联系电话</font></th>
        <th style="min-width:60px;"><font face="楷体">政治面貌</font></th>
        <th style="min-width:120px;"><font face="楷体">文化程度</font></th>
        <th style="min-width:60px;"><font face="楷体">婚姻状况</font></th>
        <th style="min-width:70px;"><font face="楷体">体检日期</font></th>
        <th style="min-width:60px;"><font face="楷体">学历证明</font></th>
        <th style="min-width:80px;"><font face="楷体">入职承诺书</font></th>
        <th style="min-width:30px;"><font face="楷体">押金</font></th>
        <th style="min-width:120px;"><font face="楷体">备注</font></th>
      </tr>
    </thead>
    <tbody />
  </table>
  <div class="pageNum" align="right"><font face="楷体"></font></div>
</div>
</body>
</html>
